@import "../../asset/css/util";

.wechat-page {
  .return {
    position: absolute;
    bottom: 0;
    right: 20px;
  }
  .wechat-item {
    position: relative;
    width: 100%;
    height: 113px;
    background: url(./images/wechat-item.jpg) no-repeat;
    background-size: cover;
    .wechat-item-avatar {
      position: absolute;
      width: 93px;
      height: 93px;
      top: 10px;
      left: 20px;
    }
    .wechat-item-text {
      color: rgb(127, 127, 127);
      font-size: 30px;
      font-family: FZKaTong;
      position: absolute;
      height: 113px;
      transform: rotate(0deg);
      left: 124px;
      width: 417px;
      opacity: 0;
      p {
        position: absolute;
      }
      .top-text {
        top: 21px;
      }
      .bottom-text {
        top: 57px;
      }
      .middle-text {
        top: 38px;
      }
    }
    .wechat-item-animate-1 {
      @include animation(wechat-item-animate 0.6s 0.2s ease-out forwards);
    }
    .wechat-item-animate-2 {
      @include animation(wechat-item-animate 0.6s 0.7s ease-out forwards);
    }
    .wechat-item-animate-3 {
      @include animation(wechat-item-animate 0.6s 1.2s ease-out forwards);
    }
    @keyframes wechat-item-animate {
      from {
        opacity: 1;
        @include transform(translateX(640px));
      }
      to {
        opacity: 1;
        @include transform(translateX(0px));
      }
    }
  }
}